<template>
  <div class="bg">
    <div class="login">
      <div class="form_box">
        <div class="title">系统登录</div>
        <el-form :rules="rules" ref="info" :model="info">
          <el-form-item prop="account">
            <el-input type="text" prefix-icon="iconfont icon-yonghu" placeholder="请输入账号" v-model="info.account">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input :type="showPassword ? 'password' : 'text'" placeholder="请输入密码" v-model="info.password" ref="iocn">
              <i slot="prefix" class="iconfont icon-mima"></i>
              <i slot="suffix" class="iconfont" :class="{
                'icon-yanjing-guan': showPassword, 'icon-yanjing-kai': !showPassword,
              }" @click="changeType"></i>
            </el-input>
          </el-form-item>
          <el-button type="primary" style="width: 100%" @click="login">
            登录
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { addRouteByRole } from "@/router";
import axios from "@/utils/requests";
export default {
  data() {
    const validateLogin = (rule, value, callback) => {
      // let pattren = /^(?=.*[a-zA-Z])(?=.*\d).{6,12}$/;
      let pattren = /\w/;
      if (pattren.test(value) == true) {
        callback();
      } else {
        callback(new Error("账号必须包含字母和数字，长度为6~12位！！！"));
      }
    };
    return {
      showPassword: true,
      info: {
        account: "",
        password: "",
      },
      rules: {
        account: [
          // { required: true, message: "请输入账号", trigger: "change" },
          // {
          //   min: 3,
          //   max: 5,
          //   message: "长度在 3 到 5 个字符",
          //   trigger: "change",
          // },
          { validator: validateLogin, trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    changeType() {
      this.showPassword = !this.showPassword;
    },
    login() {
      this.$refs.info.validate(async (res) => {
        if (res) {
          const res = await axios.post("/users/checkLogin", this.info);
          sessionStorage.setItem("token", res.data.token);
          sessionStorage.setItem('role', res.data.role)
          if (res.data.code === 0) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            // 登录的时候判断是什么角色
            addRouteByRole()
            this.$router.push("/home");
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  width: 100vw;
  height: 100vh;
  background: #2d3a4b;

  .el-input {
    margin-top: 20px;
  }

  .el-button {
    line-height: 0;
    height: 32px;
    margin-top: 20px;
    font-size: 12px;
  }

  .login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .form_box {
      //   padding-top: 150px;
      width: 400px;

      .title {
        color: #fff;
        font-size: 16px;
        height: 30px;
        text-align: center;
        font-weight: 700;
        line-height: 30px;
        // margin-bottom: 20px;
      }
    }
  }
}

/deep/ .el-input__inner {
  height: 32px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
}

// .icon {
//   position: absolute;
//   top: 0;
//   left: 0;
// }
</style>